<template>
    <view>
        <view class="option-result">
            <view>
                <text class="head">处理状态：</text>
                <text class="o-font-bold">{{ res.handle?.statusName }}</text>
            </view>
            <template v-if="res.handle?.status != 0">
                <view>
                    <text class="head">处理时间：</text>
                    <text>{{ res.handle?.addTime }}</text>
                </view>
                <view class="u-flex">
                    <text class="u-flex-shrink head">处理意见：</text>
                    <textarea :value="res.handle?.opinions" disabled></textarea>
                </view>
                <view class="u-flex">
                    <text class="u-flex-shrink head">处理图片：</text>
                    <u-grid :col="3" :border="false">
                        <block v-for="(item, index) in res.handle?.operatorPics">
                            <u-grid-item>
                                <img-cache :src="`${global.QCURL}${item}/0`" width="100%" mode="widthFix" class="feed-images" border-radius="10" @click="previewImg1(res.handle.operatorPics, index)"></img-cache>
                            </u-grid-item>
                        </block>
                    </u-grid>
                </view>
            </template>
        </view>
        <view class="feedback">
            <view>
                <text class="head">建议类型：</text>
                <text>{{ res.feedback?.typeName }}</text>
            </view>
            <view>
                <text class="head">提交时间：</text>
                <text>{{ res.feedback?.addTime }}</text>
            </view>
            <view class="u-flex">
                <text class="u-flex-shrink head">反馈内容：</text>
                <textarea disabled :value="res.feedback?.content"></textarea>
            </view>
            <view style="margin-top: 20rpx" v-if="res.feedback?.contactInfo">
                <text class="head">联系方式：</text>
                <text>{{ res.feedback?.contactInfo }}</text>
            </view>
            <view class="u-flex" style="margin-top: 20rpx">
                <text class="u-flex-shrink head">反馈图片：</text>
                <u-grid :col="3" :border="false">
                    <block v-for="(item, index) in res.feedback?.feedbackPics">
                        <u-grid-item>
                            <img-cache :src="`${global.BASE_URL_API}/file/file-view/annexFile/${item}`" border-radius="10" width="100%" mode="widthFix" class="feed-images" @click="previewImg(res.feedback.feedbackPics, index)"></img-cache>
                        </u-grid-item>
                    </block>
                </u-grid>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import global from '@/config'
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'

const id = ref('')

const res = ref<any>({})

onLoad((option: any) => {
    id.value = option.id
})
onMounted(()=>{
    uni.$u.$api.BaseApi.queryFeedbackInfo({ id: id.value }).then((ret: any) => {
        res.value = ret
    })
})
function previewImg1(e: any, index: number) {
    let urls = e.map((m: any) => `${global.QCURL}${m}/0`)
    uni.previewImage({
        current: index,
        urls: urls,
        indicator: 'number'
    })
}
function previewImg(e: any, index: number) {
    let urls = e.map((m: any) => `${global.BASE_URL_API}/file/file-view/annexFile/${m}`)
    uni.previewImage({
        current: index,
        urls: urls,
        indicator: 'number'
    })
}
</script>

<style scoped lang="scss">
.head {
    color: #999999;
}
.option-result,
.feedback {
    padding: 30rpx;
    background-color: $uni-bg-color;
    margin-top: 20rpx;
    & > view {
        line-height: 60rpx;
    }
}
.feed-images {
    margin-right: 5%;
    border: 1rpx solid #cfcfcf;
}
textarea {
    font-size: 24rpx;
    padding: 30rpx;
    background-color: $uni-bg-color-grey;
    border-radius: 10rpx;
}
</style>
